<template>
  <div>

    <v-card>
      <!--<v-card-title>-->
      <v-card-title class="layout row">
        <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
        <!--空间隔离组件-->
        <v-spacer />
        <!--搜索框，与search属性关联-->
        <!--<v-text-field  label="输入关键字搜索" v-model="search" append-icon="search"
                       hide-details/>-->
        <v-text-field
          label="请输入搜索条件"
          append-icon="search"
          class="flex sm3"
          hide-details
          v-model="search"
        />
      </v-card-title>

      <v-divider/>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      ><!--:search="search"-->
        <template slot="items" slot-scope="props">
          <td class="text-xs-center">{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center"><img :src="props.item.image"></td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="justify-center layout">
            <v-btn color="info" @click="editBrand(props.item)" small fab>编辑</v-btn>
            <v-btn color="warning"  @click="deleteBrand(props.item)" small fab>删除</v-btn>
          </td>
        </template>
      </v-data-table>


      <!--弹出的对话框-->
      <v-dialog max-width="500" v-model="show" persistent>
        <v-card>
          <!--对话框的标题-->
          <v-toolbar dark dense color="primary">
            <v-toolbar-title>{{isEdit ? '修改品牌' : '新增品牌'}}</v-toolbar-title>
            <v-spacer/>
            <!--关闭窗口的按钮-->
            <!--将关闭按钮置于最右边-->
            <v-btn icon @click="show = false">
              <v-icon>close</v-icon>
            </v-btn>
          </v-toolbar>


          <v-card-text class="px-5">
            <my-brand-form @close="closeWindow" :oldBrand="oldBrand" :isEdit="isEdit"/>
          </v-card-text>
        </v-card>
      </v-dialog>


    </v-card>

  </div>

</template>

<script>
  //导入自定义的表单组件
  import MyBrandForm from './MyBrandForm'

  export default {
    name: "my-brand",

    components:{
      MyBrandForm
    },
    data() {
      return {
        search: '', // 搜索过滤字段
        totalBrands: 0, // 总条数
        brands: [], // 当前页品牌数据
        loading: true, // 是否在加载中
        pagination: {}, // 分页信息
        headers: [
          {text: 'id', align: 'center', value: 'id'},
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: true,},
          {text: '操作', align: 'center'}
        ],
        show:false,  //控制对话框显示
        oldBrand:{}, //即将编辑的品牌数据
        isEdit: false,//是否编辑
      }
    },
    mounted(){ // 渲染后执行
      // 查询数据
      this.getDataFromServer();
    },
    watch: {
      pagination: { // 监视pagination属性的变化
        deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
        handler() {
          // 变化后的回调函数，这里我们再次调用getDataFromServer即可
          this.getDataFromServer();
        }
      },
      search: { // 监视搜索字段
        handler() {
          this.getDataFromServer();
        }
      }
    },
    methods:{


      //删除品牌
      deleteBrand(item) {
        this.$message.confirm('此操作将永久删除该品牌, 是否继续?').then(() => {
          // 发起删除请求
          this.$http.delete("/item/brand/" + item.id)
            .then(() => {
              // 删除成功，重新加载数据
              this.$message.success("删除成功！");
              this.getDataFromServer();
            })
        }).catch(() => {
          this.$message.info("删除已取消！");
        });

      },
      //修改品牌
      editBrand(oldBrand){
        // 根据品牌信息查询商品分类
        this.$http.get("/item/category/bid/" + oldBrand.id)
          .then(({data}) => {

            //修改标记
            this.isEdit = true;
            // 控制弹窗可见：
            this.show = true;
            // 获取要编辑的brand
            this.oldBrand = oldBrand;
            // 回显商品分类
            this.oldBrand.categories = data;
          })
      },
      //增加品牌
      addBrand(){
        //修改标记
        this.isEdit = false;
        // 控制弹窗可见：
        this.show = true;
        // 把oldBrand变为null
        this.oldBrand = null;
      },
      closeWindow(){
        // 关闭窗口
        this.show = false;
        // 重新加载数据
        this.getDataFromServer();
      },
      getDataFromServer(){ // 从服务的加载数的方法。
        // 发起请求
        this.$http.get("/item/brand/page",{
          params:{
            key: this.search, // 搜索条件
            page: this.pagination.page,// 当前页
            rows: this.pagination.rowsPerPage,// 每页大小
            sortBy: this.pagination.sortBy,// 排序字段
            desc: this.pagination.descending// 是否降序
          }
        }).then(resp => { // 这里使用箭头函数
          // 将得到的数据赋值给本地属性
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        });



        /*        // 模拟延迟一段时间，随后进行赋值
                setTimeout(() => {
                  // 然后赋值给brands
                  this.brands = brands;
                  this.totalBrands = brands.length;
                  // 完成赋值后，把加载状态赋值为false
                  this.loading = false;
                },400)*/
      }
    }
  }

</script>


<style scoped>

</style>
